<template><view class="uni-combox">
		<view v-if="label" class="uni-combox__label" :style="labelStyle">
			<om-label :label="label" :required="required" :showEditIcon="showEditIcon"></om-label>
		</view>
		<view class="uni-combox__input-box">
			<text class="om-combox__text" @click="toggleSelector">{{showVal?showVal:"折线图"}}</text>
			<uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons>
			<view class="uni-combox__selector" v-if="showSelector">
				<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
					<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
						<text>{{emptyTips}}</text>
					</view>
					<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
						<text>{{item}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../../uniui/uni-icons/uni-icons.vue'
	export default{
		name: 'omCombox',
		components: {
			uniIcons
		},
		props: {
			status:{
				type:Boolean,
				default:true
			},
			label: {
				type: String,
				default: ''
			},
			labelWidth: {
				type: String,
				default: 'auto'
			},
			required:{
				type:Boolean,
				default:false
			},
			placeholder: {
				type: String,
				default: ''
			},
			candidates: {
				type: Array,
				default () {
					return []
				}
			},
			emptyTips: {
				type: String,
				default: '无匹配项'
			},
			value: {
				type: String,
				default: ''
			},
			valueAlign:{
				type: String,
				default: 'left'
			},
			showEditIcon:{
				type: [Boolean,String],
				default: false
			},
		},	
			data() {
				return {
					showSelector: false,
					showVal:''
				}
			},
			computed: {
				labelStyle() {
					if (this.labelWidth === 'auto') {
						return {}
					}
					return {
						width: this.labelWidth
					}
				},
				filterCandidates() {
					return this.candidates
				},
				filterCandidatesLength() {
					return this.filterCandidates.length
				}
			},
		methods: {
			toggleSelector() {
					this.showSelector = !this.showSelector
				},
				onSelectorClick(index) {
					this.showVal = this.filterCandidates[index]
					this.showSelector = false
					this.$emit('changeValue',this.showVal,index)
				},
		},	
	}
</script>

<style>
	<style lang="scss" scoped>
		.uni-combox {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			height: 21px;
			flex-direction: row;
			align-items: center;
			// border-bottom: solid 1px #DDDDDD;
		}
	
		.uni-combox__label {
			font-size: 16px;
			line-height: 22px;
			padding-right: 10px;
			color: #999999;
		}
	
		.uni-combox__input-box {
			position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex: 1;
			flex-direction: row;
			align-items: center;
		}
	
		.uni-combox__input {
			flex: 1;
			font-size: 16px;
			// height: 22px;
			// line-height: 22px;
			align-items: right;
		}
	
		.uni-combox__input-arrow {
			padding: 10px;
		}
	
		.uni-combox__selector {
			box-sizing: border-box;
			position: absolute;
			top: 42px;
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 6px;
			box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
			z-index: 99999999 ;  
		}
	
		.uni-combox__selector-scroll {
			max-height: 200px;
			box-sizing: border-box;
			
		}
	
		.uni-combox__selector::before {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-bottom: solid 6px #FFFFFF;
			border-right: solid 6px transparent;
			border-left: solid 6px transparent;
			left: 50%;
			top: -6px;
			margin-left: -6px;
		}
	
		.uni-combox__selector-empty,
		.uni-combox__selector-item {
			/* #ifdef APP-NVUE */
			display: flex;
			/* #endif */
			line-height: 36px;
			font-size: 14px;
			text-align: center;
			border-bottom: solid 1px #DDDDDD;
			margin: 0px 10px;
		}
	
		.uni-combox__selector-empty:last-child,
		.uni-combox__selector-item:last-child {
			border-bottom: none;
		
		}
		.om-combox__text{
			margin-left: 10px;
			text-align:center; 
			width: 60px;
		}
</style>
